{% block sw_text_editor %}
<!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
<div
    class="sw-text-editor"
    :class="classes"
    @click="onClick"
>

    {% block sw_text_editor_label %}
    <div
        v-if="showLabel"
        class="sw-text-editor__label"
    >
        <slot name="label">
            {{ label }}
        </slot>
    </div>
    {% endblock %}
    {% block sw_text_editor_box %}
    <div class="sw-text-editor__box">
        {% block sw_text_editor_box_toolbar %}
        <sw-text-editor-toolbar
            v-if="(hasSelection && !disabled) || !isInlineEdit"
            ref="text-editor-toolbar"
            :parent-is-active="isActive"
            :is-inline-edit="isInlineEdit"
            :selection="selection"
            :button-config="buttonConfig"
            :is-code-edit="isCodeEdit"
            :is-table-edit="isTableEdit"
            @created-el="onToolbarCreated"
            @destroyed-el="onToolbarDestroyed"
            @on-set-link="onSetLink"
            @remove-link="onRemoveLink"
            @table-edit="onTableEdit"
            @text-style-change="onTextStyleChange"
        />
        {% endblock %}

        {% block sw_text_editor_box_table_toolbar %}
        <sw-text-editor-table-toolbar
            v-if="isTableEdit && !isInlineEdit && !isCodeEdit"
            :selection="selection"
            @table-delete="onTableDelete"
            @table-modify="onTableModify"
        />
        {% endblock %}

        {% block sw_text_editor_box_content %}
        <sw-code-editor
            v-if="isCodeEdit"
            ref="codeEditor"
            :value="value"
            :sanitize-input="sanitizeInput"
            :sanitize-field-name="sanitizeFieldName"
            :sanitize-info-warn="sanitizeInfoWarn"
            set-focus
            @blur="emitHtmlContent"
            @update:value="emitHtmlContent"
        />

        <div
            v-else
            class="sw-text-editor__content"
            :class="contentClasses"
        >
            <!-- eslint-disable -->
            <div
                ref="textEditor"
                class="sw-text-editor__content-editor"
                :contenteditable="!disabled"
                :style="verticalAlignStyle"
                :spellcheck="true"
                tabindex="-1"
                @focus="onFocus"
                @keyup.enter="onEnter"
                @paste="onPaste"
                @input="onInput"
                @copy="onCopy"
                @mousedown.right.stop
                v-html="$sanitize(content, { ADD_ATTR: ['target'] })"
            ></div>
            <!-- eslint-enable -->
            <div
                v-if="placeholderVisible"
                class="sw-text-editor__content-placeholder"
                v-html="$sanitize(placeholder)"
            ></div>
        </div>
        {% endblock %}

        {% block sw_text_editor_box_word_count %}
        <div
            v-if="!isInlineEdit && !isCodeEdit"
            class="sw-text-editor__word_count"
        >
            <sw-container
                columns="1fr"
                justify="right"
            >
                <span class="sw-text-editor__text-length">
                    {{ $tc('global.sw-text-editor.labelTextLength', { count: textLength }, textLength) }}
                </span>
            </sw-container>
        </div>
        {% endblock %}
    </div>
    {% endblock %}

    <sw-field-error
        v-if="error"
        :error="error"
    />
</div>
{% endblock %}
